<template>
	<view class="contain">
		<view class="collect_item" v-for="item in collectList" :key="item.id">
			<view class="image_c">
				<image :src="item.pic" mode="heightFix"></image>
			</view>
			<view class="good_info">
				<text>{{item.name}}</text>
				<text>收藏</text>
			</view>
			<view class="price_c">
				<text>￥{{item.price}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectList: []
			}
		},
		methods: {

		},
		onLoad() {
			this.collectList = uni.getStorageSync("collectList") || [];
		}
	}
</script>

<style lang="scss" scoped>
.contain {
	padding: 30rpx;
	margin: auto;
}

.collect_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 30rpx;
	background-color: #fff;
}

.image_c {
	display: flex;
	align-items: center;
	justify-items: center;
	width: 120rpx;
	height: 160rpx;
	border-radius: 20rpx;
	overflow: hidden;
	image {
		height: 160rpx;
	}
}

.good_info {
	height: 160rpx;
		width: 360rpx;
	display: flex;
	align-content: space-between;
	flex-wrap: wrap;
	text {
		width: 100%;
		display: block;
		padding: 20rpx 0;
		margin-left: 30rpx;
	}
}

.price_c {
	height: 160rpx;
		display: flex;
		align-items: flex-end;
	text {
		padding: 10rpx 0;
		font-weight: 600;
	}
}
</style>
